<template>
  <div>
    <!-- <el-steps :active="workflowList.length">
      <el-step v-for="(item, i) in workflowList" :key="i" :title="item.name" :description="item.startTime"></el-step>
    </el-steps> -->
    <div>
      <el-table border class="table_list" :data="recordList" max-height="400">
        <el-table-column show-overflow-tooltip min-width="120" prop="taskName" label="执行环节"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="120" prop="type" label="环节类型"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" prop="assignee" label="执行人"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="160" prop="startTime" label="开始时间" sortable></el-table-column>
        <el-table-column show-overflow-tooltip min-width="160" prop="endTime" label="结束时间"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="160" prop="fullMessage" label="审批意见"></el-table-column>
        <el-table-column show-overflow-tooltip min-width="100" prop="duration" label="历时">
          <template #default="{ row }">
            <span>{{ $compoteFormatTime(row.startTime, row.endTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getTaskHistory } from '@/api/workflow/task'
  export default {
    name: 'SalesOrderWorkflow',
    props: {
      dataInfo: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        workflowList: [],
        recordList: [],
      }
    },
    created() {
      this.getTaskHistoryData()
    },
    methods: {
      getTaskHistoryData() {
        let params = {
          businessKey: this.$props.dataInfo.businessKey,
          category: this.$props.dataInfo.category,
        }
        getTaskHistory(params).then((res) => {
          // this.workflowList = res.data.nodes
          this.recordList = res.data.records
          this.$emit('fetch-data', res.data.title)
        })
      },
    },
  }
</script>
